<template>
  <div v-if="ready" class="d-flex h-100 w-100 flex-column">
    <topHeader :title="$t('synthesis.title')" :showTime="false"></topHeader>

    <div class="d-flex  h-20 px-2">
      <div class="w-20 m-2 small-bg-custom p-3">
        <p class="text-custom-2 text-custom" >{{ $t('synthesis.unpaid') }}</p>
        <div class="d-flex h-80 flex-column align-items-center justify-content-center">
          <h1 class="text-white text-center text-blue" >
            {{ total_unpaid_slice }} <span class="text-white">/{{ $t('synthesis.pcs') }}</span></h1>
          <div style="border-top:1px solid rgb(230 230 230 / 48%);width: 30%;"></div>
          <h1 class="text-white text-center text-blue" >
            {{ total_unpaid }}<span class="text-white">/{{ $t('synthesis.tray') }}</span></h1>
        </div>
      </div>

      <div class="w-20 m-2 small-bg-custom p-3">
        <p class="text-custom-2 text-custom" >{{ $t('synthesis.pending') }}</p>
        <div class="d-flex h-80 flex-column align-items-center justify-content-center">
          <h1 class="text-white text-center text-blue" >
            {{ total_pending_slice }}<span class="text-white">/{{ $t('synthesis.pcs') }}</span></h1>
          <div style="border-top:2px solid rgb(230 230 230 / 48%);width: 30%;"></div>
          <h1 class="text-white text-center text-blue" >
            {{ total_pending }}<span class="text-white">/{{ $t('synthesis.tray') }}</span></h1>
        </div>
      </div>

      <div class="w-20 m-2 small-bg-custom p-3">
        <p class="text-custom-2 text-custom" >{{ $t('synthesis.produced') }}</p>
        <div class="d-flex h-80 flex-column align-items-center justify-content-center">
          <h1 class="text-white text-center text-blue" >
            {{ total_produced_slice }}<span class="text-white">/{{ $t('synthesis.pcs') }}</span></h1>
          <div style="border-top:2px solid rgb(230 230 230 / 48%);width: 30%;"></div>
          <h1 class="text-white text-center text-blue" >
            {{ total_produced }}<span class="text-white">/{{ $t('synthesis.tray') }}</span></h1>
        </div>
      </div>

      <div class="w-20 m-2 small-bg-custom p-3">
        <p class="text-custom-2 text-custom" >{{ $t('synthesis.delivered') }}</p>
        <div class="d-flex h-80 flex-column align-items-center justify-content-center">
          <h1 class="text-white text-center text-blue" >
            {{ total_delivered_slice }}<span class="text-white">/{{ $t('synthesis.pcs') }}</span></h1>
          <div style="border-top:2px solid rgb(230 230 230 / 48%);width: 30%;"></div>
          <h1 class="text-white text-center text-blue" >
            {{ total_delivered }}<span class="text-white">/{{ $t('synthesis.tray') }}</span></h1>
        </div>
      </div>

      <div class="w-20 m-2 small-bg-custom p-3">
        <p class="text-custom-2 text-custom" >{{ $t('synthesis.today') }}</p>
        <div class="d-flex h-80 flex-column align-items-center justify-content-center">
          <h1 class="text-white text-center text-blue" >
            {{ today_today_slice }}<span class="text-white">/{{ $t('synthesis.pcs') }}</span></h1>
          <div style="border-top:2px solid rgb(230 230 230 / 48%);width: 30%;"></div>
          <h1 class="text-white text-center text-blue" >
            {{ total_today_delivered }}<span class="text-white">/{{ $t('synthesis.tray') }}</span></h1>
        </div>
      </div>
    </div>

    <div class="d-flex h-70 px-2 justify-content-between">
      <div class="d-flex w-40 h-100 flex-column">
        <div class="d-flex w-100 h-50 p-2">
          <div class="d-flex w-100 h-100 flex-column p-2 pl-3 bg-custom">
            <p class="text-custom-2 text-custom-bg" style="margin:0" >{{ $t('synthesis.tomonthme') }}</p>
            <div class="d-flex flex-row h-100 justify-content-around align-items-center">
              <div class="d-flex justify-content-center maintenance_progress">
                <div class="d-flex flex-column align-items-center">
                  <Progress :target-value="num" :width="getScreenWidth / 12 " :height="getScreenWidth / 12">
                  </Progress>
                  <div style="flex:auto;" class="mt-1">
                    <p class="text-white text-center" style="margin-top: -12px; " >{{ $t('synthesis.meratio') }}{{ num }}</p>
                    <p class="text-white" style="margin-top: -12px; ">
                      {{ $t('synthesis.menum') }}:{{ repaired }}/{{ repairedsum }}</p>
                  </div>
                </div>
              </div>
              <div class="d-flex  justify-content-center maintain_progress ">
                <div class="d-flex flex-column align-items-center">
                  <Progress :target-value="maintainVal > 100 ? 100 : maintainVal" :width="getScreenWidth / 12" :height="getScreenWidth / 12">
                  </Progress>
                  <div style="flex:auto;" class="d-flex flex-column justify-content-center mt-1">
                    <p class="text-white" style="margin-top: -12px;">
                      {{ $t('synthesis.memaintain') }}</p>
                    <p class="text-white" style="margin-top: -12px;visibility: hidden; "> 点技能 </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


         <div class="d-flex w-100 h-50 p-2 ">
          <div class="d-flex w-100 h-100 flex-column p-2 pl-3 bg-custom" style="position: relative;">
            <p class="text-custom-2 text-custom-bg" style="margin:0;" >{{ $t('synthesis.todayproducted') }}</p>

            <div class="d-flex w-100 h-20 px-2 pb-1 justify-content-center" style="width: 90% !important;margin:0 auto;">
              <div class="d-flex flex-column w-25 tn-center">
                <div class="d-flex align-items-center justify-content-center text-custom-2 "
                  style="width:100%;color:#FFFFFF !important" ><span
                    class="color-desc" style="background-color: #db5995;"></span>{{ $t('synthesis.pendingpcs') }}</div>
              </div>


              <div class="d-flex flex-column w-25 tn-center">
                <div class="d-flex align-items-center justify-content-center text-custom-2"
                  style="color:#FFFFFF !important"><span
                    class="color-desc" style="background-color: #4d9fc5;"></span>{{ $t('synthesis.unpaidpcs') }}</div>
              </div>

            </div>

            <div class="d-flex w-100 h-80 justify-content-center pb-2">
              <productLineChart :width="getScreenWidth * 0.4"  :hours="hours" :produced="produced" :selected="selected" :examined="examined" :delivered="delivered" />
            </div>
          </div>
        </div>
        
      </div>

      <div class="d-flex w-40 h-100 flex-column">
        
        <div class="d-flex w-100 h-50 p-2 ">
          <div class="d-flex w-100 h-100 flex-column p-2 pl-3 bg-custom pd-0">
            <p class="text-custom-2 text-custom-bg" style="margin:0;" >{{ $t('synthesis.toweekbad') }}</p>

            <div class="d-flex w-95 h-90 justify-content-center">
              <scrapbarChart :width="getScreenWidth * 0.33"  :dataY="scrapbarChartY" :dataX="week" ></scrapbarChart>
            </div>
          </div>
        </div>

        <div class="d-flex w-100 h-50 p-2">
          <div class="d-flex w-100 h-100 flex-column p-2 pl-3 bg-custom pd-0">
            <p class="text-custom-2 text-custom-bg" style="margin:0;" >{{ $t('synthesis.toweekoee') }}</p>

            <div class="d-flex w-95 h-90 justify-content-center pb-2">
              <OEELineChart :width="getScreenWidth * 0.33"  :dataX="week" :dataY="oeeLineChartY" ></OEELineChart>
            </div>
          </div>
        </div>
      </div>

      <div class="d-flex w-20 h-100 p-2 ">
        <div class="d-flex w-100 h-100 flex-column p-2 pl-3 pt-3 bg-custom">
          <p class="text-custom-2 text-custom-bg" >{{ $t('synthesis.productpcs') }}</p>

           <Vue3SeamlessScroll  :list="month_orders" class="seamless-scroll" :step=".3">
            <div class="p-3" v-for="(order, index) in month_orders"
              :key="'month_order_' + index">
              <div class="d-flex">
                <p class="bg-white px-2 p-1" >{{ order.name }}</p>
              </div>
              <div class="d-flex">
                <p class="bg-white p-1" >{{ $t('synthesis.level') }}：{{
                  (index + 1) >= 10 ? (index + 1) : '0' + (index + 1) }}</p>
              </div>

              <div class="d-flex justify-content-between">
                <p class="text-custom-2" :style="{color:'#7a6cf9'}">{{ $t('synthesis.unpaid') }}</p>
                <p class="text-white" :style="{ fontWeight:500 }">{{ order.orderDelivered }}</p>
              </div>

              <div class="horizontal-progress" style="height: 8px;">
                <div class="horizontal-progress--bar" role="progressbar" style="background-color: #7a6cf9;"
                  :style="{ width: order.orderDelivered / order.orderReceived * 100 + '%' }" aria-valuenow="100"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>

              <div class="p-1"></div>

              <div class="d-flex justify-content-between">
                <p class="text-custom-2" :style="{color:'#3463ff'}">{{ $t('synthesis.pending') }}</p>
                <p class="text-white" :style="{fontWeight:500}">{{ order.orderReceived }}</p>
              </div>
              <div class="horizontal-progress" style="height: 8px;">
                <div class="horizontal-progress--bar" role="progressbar" style="width: 100%;background-color: #3463ff;" aria-valuenow="100" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
            </div>
          </Vue3SeamlessScroll> 
        </div>
      </div> 
    </div>
    <bottomFooter></bottomFooter>
  </div>
</template>
<script setup lang="ts">
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import bottomFooter from '@/components/bottomFooter/index.vue';
const Progress = defineAsyncComponent(()=>import('@/components/circularProgress/index.vue'))
const topHeader = defineAsyncComponent(()=>import('@/components/topHeader/index.vue'))
const productLineChart = defineAsyncComponent(()=>import('@/components/productLine/index.vue'))
const OEELineChart = defineAsyncComponent(()=>import('@/components/oeeLine/index.vue'))
const scrapbarChart = defineAsyncComponent(()=>import('@/components/scrapbarChart/index.vue'))
// const numcard = defineAsyncComponent(()=>import('@/components/numcard/index.vue'))
const { proxy } = getCurrentInstance() as any
const ready = ref(true)
const getScreenWidth: any = computed(() => proxy.$common.getScreenWidth())
onMounted(()=>{
  generateData()
  generateData2()
})
const hours = ref([] as number[])
const produced = ref([] as number[])
const selected = ref([] as number[])
const examined = ref([] as number[])
const delivered = ref([] as number[])
const total_unpaid_slice = ref(0)
const total_unpaid = ref(0)
const today_today_slice = ref<number>(0)
const total_today_delivered = ref<number>(0)
const total_pending_slice = ref<number>(0)
const total_pending = ref<number>(0)
const total_produced_slice = ref<number>(0)
const total_produced = ref<number>(0)
const total_delivered_slice = ref<number>(0)
const total_delivered = ref<number>(0)

const month_orders = ref([] as Array<any>);
const oeeLineChartY = ref([] as string[])
const maintainVal = ref(0)
const scrapbarChartY = ref([] as string[])
const repaired = ref(0)
const repairedsum = ref(0)
const week = ref(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'])
const num = computed(()=>{ return Math.trunc((repaired.value / repairedsum.value) *100) > 100 ? 100 : Math.trunc((repaired.value / repairedsum.value)*100)})
const generateData = ()=> {
    let thisMonthOrders = [];
    let deadlineDeliveryRateList = [];

    let oeeVal = []
    let scradVal = ['', '', '', '', '', '', '']

    let siteDelayedOrder = [];
    let total = proxy.$common.random(10, 15);

    // var now = new Date();
    // var day:number = now.getDay();

    for (let i = 0; i <= 6; i++) {
      oeeVal[i] = proxy.$common.random(0, 100)
      scradVal[i] = proxy.$common.random(0, 20)
    }
    for (let i = 1; i <= total; i++) {
      let orderReceived = proxy.$common.random(0, 300);
      let orderDelivered = proxy.$common.random(0, orderReceived);

      thisMonthOrders.push({
        name: i >= 10 ? "ITEM0" + i : "ITEM00" + i,
        orderReceived: orderReceived,
        orderDelivered: orderDelivered,
      });

      deadlineDeliveryRateList.push({
        name: "GTW6-" + (i >= 10) ? "GTW6-" + i : "GTW6-0" + i,
        rate: ((orderDelivered / orderReceived) * 100).toFixed(2),
      });

      let info = ['PLC: Bank电源异常', 'PLC: 数据通信异常', 'PLC: 冷却系统异常', 'PLC: 高度传感器数据异常']
      siteDelayedOrder.push({
        name: "GTW6-" +  (i >= 10) ? "GTW6-" + i : "GTW6-0" + i,
        qty: info[proxy.$common.random(0, 3)],
      });
    }

    month_orders.value = thisMonthOrders;
    oeeLineChartY.value = oeeVal
    maintainVal.value = proxy.$common.random(0, 100)
    scrapbarChartY.value = scradVal
    repaired.value = proxy.$common.random(0, 50)
    repairedsum.value = proxy.$common.random(50, 100)
}
const generateData2 = ()=> {

      let hoursArr = [];
      let producedArr = [];
      let selectedArr = [];
      let examinedArr = [];
      let deliveredArr = [];

      for (let i = 1; i <= 24; i++) {
        hoursArr.push(i);
      }

      hours.value = hoursArr;


      for (let i = 0; i < 24; i++) {
        producedArr.push(proxy.$common.random(600, 700));
        selectedArr.push(proxy.$common.random(400, 500));
        examinedArr.push(proxy.$common.random(300, 500));
        deliveredArr.push(proxy.$common.random(200, 300));
      }

      produced.value = producedArr;
      selected.value = selectedArr;
      examined.value = examinedArr;
      delivered.value = deliveredArr;

      
      // overview
      //待生产
      total_unpaid_slice.value = proxy.$common.random(20, 300);
      total_unpaid.value = Math.trunc(today_today_slice.value / proxy.$common.random(30, 50));

      //今日生产完成
      today_today_slice.value = proxy.$common.random(100, 1500);
      total_today_delivered.value = Math.trunc(today_today_slice.value / proxy.$common.random(30, 50));

      //生产中
      total_pending_slice.value = proxy.$common.random(350, 5000);
      total_pending.value = Math.trunc(total_pending_slice.value / proxy.$common.random(30, 50));


      //总生产数
      total_produced_slice.value = proxy.$common.random(2000, 3000);
      total_produced.value = Math.trunc(total_produced_slice.value / proxy.$common.random(30, 50));

      //总出货量
      total_delivered_slice.value = proxy.$common.random(1800, 2500);
      total_delivered.value = Math.trunc(total_delivered_slice.value / proxy.$common.random(30, 50));
    }
</script>
<style>
.text-custom-2 {
  color: #fff;
  /* font-size: 1.3rem; */
}

.footer {
  position: fixed;
  bottom: 0;
  text-align: right;
  color: #ffffff;
  background-color: transparent;
  width: 100%;
  z-index: 111;
  font-size: 12px;
}

#app {
  width: 1920px;
  height: 1080px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  /*overflow: hidden;*/
}

.color-desc {
  display: inline-block;
  margin-right: 0.5125rem;
  width: 30px;
  font-weight: 700;
}

.maintenance_progress .circle {
  color: #2fd3e8;
}

.maintain_progress .circle {
  color: rgb(0 173 255 / 89%);
}

.maintenance_progress .vue-circular-progress .circle__progress--fill {
  stroke: #2fd3e8 !important;
}

.maintain_progress .vue-circular-progress .circle__progress--fill {
  stroke: rgb(0 173 255 / 89%) !important;
}

.text-blue {
  /* color: #3fe7c8 !important; */
  color: rgb(177, 242, 255) !important;
  font-size: 1.4rem;
}

.text-seaform {
  color: #3ded97;
}

.tn-center {
  text-align: center;
}
.pd-0 {
  padding-bottom: 0 !important;
}
.seamless-scroll{
  overflow: hidden;
}
.horizontal-progress{
  display: flex;
  height: 1rem;
  overflow:  hidden;
  line-height: 0;
  font-size: 0.75rem;
  background-color:#e9ecef;
  border-radius: 8.25rem;
}
.horizontal-progress--bar{
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow:  hidden;
  color: #fff;
  text-align: center;
  white-space:  nowrap;
  background-color:#007bff;
  transition:width 0.6s ease;
}
</style>
<style scoped>
</style>
